<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
	 src="/wow/static/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
	 src="/wow/static/easyui/jquery-easyui-1.5.2/easyui_all.js"></script>
	 	 <script type="text/javascript"
	 src="/wow/static/easyui/jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/wow/static/easyui/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"
	href="/wow/static/easyui/jquery-easyui-1.5.2/themes/metro-gray/easyui.css">

	
<script type="text/javascript">
    var urlParam;
    var type;
    var posion;
	$(function() {
	    var p = $('#dg').datagrid('getPager'); 
	    $(p).pagination({ 
	       pageSize: 10,//每页显示的记录条数，默认为10 
	       pageList: [10,20,30,50,100],//可以设置每页记录条数的列表 
	    }); 
		urlParam = decodeURI(window.location.href.split("?")[1]);
		var params =urlParam.split('&');
		var paramType = params[0].split('=')[1];
		posion=params[1];
		if(paramType=='all'){
			$('#mm').menu('appendItem', {
				text: '板甲',
				onclick: function(){
					type='plate';
					doSearch();
				}
			});
			$('#mm').menu('appendItem', {
				text: '锁甲',
				onclick: function(){
					type='chain';
					doSearch();
				}
			});
			$('#mm').menu('appendItem', {
				text: '皮甲',
				onclick: function(){
					type='leather';
					doSearch();
				}
			});
			$('#mm').menu('appendItem', {
				text: '布甲',
				onclick: function(){
					type='cloth';
					doSearch();
				}
			});
		}else if(paramType='leather'){
			type='leather';
			/* $('#mm').menu('appendItem', {
				text: '皮甲',
				iconCls: 'icon-ok',
				onclick: function(){
					type='leather';
					doSearch();
				}
			}); */
		}

		var opts = $("#dg").datagrid("options");
		opts.url = '/wow/equip/getEquipList?'+urlParam+"&rows="+10;
		opts.method='GET';
		$("#dg").datagrid('reload');
	});
	function doSearch() {
		var opts = $("#dg").datagrid("options");
		opts.url = '/wow/equip/getEquipList?type='+type+'&'+posion+"&equipName="+$('#nameInput').val();
		opts.method='GET';
		$("#dg").datagrid('reload');
	}
	function save(){
		var row = $('#dg').datagrid('getSelected');
		return row.equip_id;
	}
	function formatter(value, rec, index){
		 var href = '';
		 var href = '';
		 href += "<a href='javascript:void(0)' style='text-decoration : none ' id="+rec.equip_id+" onclick=showTip('"
				+rec.equip_id+"')>" +rec.equip_name+"</a>";

		 return href;
	}
	function showTip(code){
		$.ajax({
			type : "GET",
			async : true,
			url : '/wow/equip/getTooltip?code=' + code,
			success : function(data){
				$("#" + code).tooltip({
					content :'<div style="background-color:#c7ccd1;">'+ data+'</div>',
					showEvent : 'click'
				});
				$("#" + code).tooltip('show');
				
 			},
			error : function(){
			}
		}); 
	}
	function imgFormatter(value, rec, index){
		 var href = '';
		 var href = '';
		 href += "<img   class='buffIcon'  src='/wow/static/icon/" + value +"'/>";

		 return href;
	}
</script>
<style type="text/css">
	.form-group{
		 display: flex;
		 flex-direction:row;
	}
	.form-item{
	 	flex:1;
	}
	.form-item1{
	 	flex:2;
	}
			.q {
		color:#ffd100!important;
		}
		
		.q0,.q0 a {
		color:#9d9d9d!important;
		}
		
		.q1,.q1 a {
		color:#fff!important;
		}
		
		.q2,.q2 a {
		color:#1eff00!important;
		}
		
		.q3,.q3 a {
		color:#0070dd!important;
		}
		
		.q4,.q4 a {
		color:#a335ee!important;
		}
		
		.q5,.q5 a {
		color:#ff8000!important;
		}
		.buffIcon {
		    height: 52px;
		    width: 52px;
		}
</style>
</head>
<body>
		<div class="easyui-layout" fit="true">
		<div region="north" border="false" height="auto">
		<input class="easyui-searchbox" data-options="prompt:'请输入...',menu:'#mm',searcher:doSearch" id='nameInput' style="width:300px"></input>
   		<div id="mm" style="width:120px">
	      	  <div data-options="name:'all'">所有</div>
   		 </div>
		</div>
		
		<div id="mainPanle" region="center" border="false">
			<table id="dg" class="easyui-datagrid" fit="true" loadMsg='正在努力加载...请稍等...'
	            title="装备列表"  data-options="singleSelect:true"  pagePosition="bottom" pagination='true'>
		        <thead>
		            <tr>
		            	<th field="equip_img" width="80" align="center" formatter='imgFormatter'></th>
		                <th field="equip_name" width="200" align="center" formatter='formatter'>装备名称</th>
		                <th field="equip_type" width="200" align="center">类型</th>
		                <th field="equip_postion" width="200" align="center">位置</th>
		            </tr>
		        </thead>
		      </table>
		</div>
		<div id="orderTb" class="datagrid-toolbar">
			<div style="height: 30px;">
				</span>
			</div>
		</div>
	</div>

</body>
</html>